<template>
  <chart :options="options" />
</template>

<script>
export default {
  name: "echartsLine",
  props: {
    title: {
      type: String,
      default: "",
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    dimensions: {
      type: Array,
      default: () => {
        return null;
      },
    },
    units: {
      type: Array,
      default: () => {
        return null;
      },
    },
    name:{
      type: Array,
      default: () => {
        return null;
      },
    },
    colors: {
      type: Array,
      default: () => {
        return null;
      },
    },
    type: {
      type: Array,
      default: () => {
        return [];
      },
    },
    legend: {
      type: Array,
      default: () => {
        return null;
      },
    },
    symbolSize: {
      type: Number,
      default: 3,
    },
    smooth: {
      type: Boolean,
      default: () => {
        return null;
      },
    },
    boundaryGap: {
      type: Boolean,
      default: () => {
        return null;
      },
    },
    left: {
      type: String,
      default: () => {
        return "1%";
      },
    },
    top: {
      type: String,
      default: () => {
        return "15%";
      },
    },
    right: {
      type: String,
      default: () => {
        return "8%";
      },
    },
    bottom: {
      type: String,
      default: () => {
        return "5%";
      },
    },
    position: {
      type: Array,
      default: () => {
        return [];
      },
    },
    legendleft: {
      type: String,
      default: () => {
        return "right";
      },
    },
    padding: {
      type: Array,
      default: () => {
        return [];
      },
    },
    paddingone: {
      type: Array,
      default: () => {
        return [10, 10, 10, 0];
      },
    },
    barBorderRadius: {
      type: Array,
      default: () => {
        return null;
      },
    },
    barGap: {
      type: String,
      default: () => {
        return null;
      },
    },
    barWidth: {
      type: Number,
      default: () => {
        return null;
      },
    },
    num: {
      type: Number,
      default: () => {
        return null;
      },
    },
    tooltipshow: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
  },
  computed: {
    options() {
      let _this = this;
      const series = [];
      const yAxis = [];
      for (let i = 0; i < this.legend.length; i++) {
        if (this.position.length != 0) {
          series.push({
            type: this.type[i],
            name: this.legend[i],
            yAxisIndex: i,
            areaStyle: {},
            symbol: "circle",
            symbolSize: this.symbolSize,
            barWidth: this.barWidth,
            smooth: this.smooth,
            barGap: this.barGap,
            itemStyle: {
              barBorderRadius: this.barBorderRadius,
              // borderColor: '#fff',
              // borderWidth: 1
            },
          });
        } else {
          series.push({
            type: this.type[i],
            name: this.legend[i],
            areaStyle: {},
            symbol: "circle",
            barGap: this.barGap,
            symbolSize: this.symbolSize,
            smooth: this.smooth,
            barWidth: this.barWidth,
            itemStyle: {
              barBorderRadius: this.barBorderRadius,
              // borderColor: '#fff',
              // borderWidth: 1
            },
          });
        }
      }
      for (let i = 0; i < this.units.length; i++) {
        if (this.position.length != 0) {
          yAxis.push({
            name: this.units[i],
            nameLocation: "end",
            nameGap: 6,
            position: this.position[i],
            scale: true,
            axisLabel: {
              interval: 0,
              color: "#ccc",
              fontSize: 20,
            },
            nameTextStyle: {
              fontSize: 20,
              color: "#ccc",
              algin: "left",
              padding: this.padding[i],
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#315070'],
                width: 1,
                type: 'dashed'
              }
            },
            show: true,
            type: "value",
          });
        } else {
          yAxis.push({
            name: this.units[i],
            nameLocation: "end",
            nameGap: 6,
            scale: true,
            axisLabel: {
              interval: 0,
              color: "#ccc",
              fontSize: 20,
            },
            nameTextStyle: {
              fontSize: 20,
              color: "#ccc",
              algin: "left",
              padding: this.paddingone,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#315070'],
                width: 1,
                type: 'dashed'
              }
            },
            show: true,
            type: "value",
          });
        }
      }
      return {
        color: this.colors,
        title: {
          text: this.title,
        },
        grid: {
          containLabel: true,
          left: this.left,
          top: this.top,
          right: this.right,
          bottom: this.bottom,
        },
        tooltip: {
          show: this.tooltipshow,
          trigger: 'axis',
          textStyle: {
            color: 'rgba(304, 304, 304, 0.9)',
            fontSize: 20
          },
          axisPointer: {
            type: 'shadow'
          },
          
          
        // formatter : function(params) {
        //   var result = params[0].name;
        //   params.forEach(function(item) {
        //       if (item.data) {
        //         result += ':' + item.data.value;
        //       }
        //     });
        //   return result;
        // }

          
        },
        legend: {
          show: true,
          left: this.legendleft,
          top: "top",
          icon: "circle",
          textStyle: {
            color: "rgba(171, 191, 213, 1)",
            fontSize: 20,
          },
          selectedMode: false,
          itemWidth: 13,
          itemHeight: 7,
          data: this.legend,
        },
        dataset: {
          dimensions: this.dimensions,
          source: this.data,
        },
        xAxis: {
          type: "category",//类目轴
          name:this.name,
          boundaryGap: this.boundaryGap,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#255a8a",
              fontSize: 20,
            },
          },
          nameTextStyle: {
              fontSize: 20,
              color: "#ccc",
              algin: "left",
              padding: this.paddingone,
            },
          
          axisLabel: {
            interval: 0,
            color: "#ccc",
            fontSize: 20,
           
            // formatter: function (value) {
            //   var ret = "";
            //   var maxLength = 2;
            //   var valLength = value.length;
            //   var rowN = Math.ceil(valLength / maxLength);
            //   if(rowN > 1){
            //     for (var i = 0; i < rowN; i++){
            //       var temp = "";
            //       var start = i * maxLength;
            //       var end = start + maxLength;
            //       temp = value.substring(start, end) + "\n";
            //       ret += temp;
            //     }
            //     return ret;
            //   }else{
            //     return value;
            //   }
            // },
          },
          // splitLine:{
          //   show: true,
          // }
        },
        yAxis: yAxis,
        series: series,
      };
    },
  },
};
</script>

<style scoped lang="less">
.echartsLine {
}
</style>
